<!DOCTYPE html>
<html lang="en">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
      <title>Asteroids Reloaded - HTML5 Canvas JavaScript Game Demo by Kevin Roast</title>
      <script src="scripts/soundmanager2-min.js"></script>
      <script>
var soundManagerLoaded = false;
soundManager.flashVersion = 9;
soundManager.useFastPolling = true;
soundManager.useHighPerformance = true;
soundManager.onready(function() {
   soundManagerLoaded = true;
});
soundManager.ontimeout(function() {
   soundManagerLoaded = true;
   soundManager = false;
});
soundManager.url = 'swf/';
      </script>
      <script src="scripts/mathlib-min.js"></script>
      <script src="scripts/gamelib-min.js"></script>
      <script src="scripts/asteroids-min.js"></script>
      <script async defer src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e4813104686cad8"></script>
      <style type="text/css">
body
{
   font-family: Segoe UI Light, Arial, Helvetica;
   font-size: 1.1em;
   background-color: #000;
   color: #ddd;
   background-image: url(images/asteroid_bg.jpg);
   background-repeat: no-repeat;
   margin: 0;
}

.box-shadow
{
   -moz-box-shadow: 3px 3px 6px #222;
   -webkit-box-shadow: 3px 3px 6px #222;
   box-shadow: 3px 3px 6px #222;
}

canvas
{
   background-color: #000;
   border: 1px solid #888;
}

.wrapper
{
   padding-top: 12px;
   text-align: center;
}

.info
{
   text-align: left;
   display: inline-block;
   vertical-align: top;
   margin-left: 0.5em;
}

.infopanel
{
   max-width: 22em;
   margin-top: 64px;
   background-color: rgba(40,40,50,.85);
   color: #fff;
   line-height: 1.25em;
   padding: 0.5em;
}

.title
{
   font-size: 1.75em;
   padding-top: 6px;
   padding-bottom: 12px;
   text-align: center;
   color: #fff;
   text-shadow: 1px 1px 4px rgb(60,60,60);
   line-height: 1em;
}

.highlight
{
   color: #ffff88;
}

.section
{
   padding-top: 0.5em;
}

.heading
{
   font-size: 1.2em;
   text-shadow: 1px 1px 3px rgba(55,55,55, .5);
}

.credits-wrapper
{
   text-align: center;
}

.credits
{
   display: inline-block;
   padding: 4px 64px;
   margin: 8px;
   text-align: center;
   background-color: rgba(40,40,50,.85);
   font-size: 0.8em;
}

P
{
   padding-left: 1em;
   padding-top: 0;
   padding-bottom: 0;
   line-height: 1.1em;
   margin-top: 0;
   margin-bottom: 0.66em;
}

P.left
{
   padding-left: 0.5em;
   line-height: 1.25em;
}

a, a:visited, a:active, a:hover
{
   color: #ddddff;
}
.button-overlay { position:absolute; right:1em }
      </style>
      <meta name="description" content="Asteroids - HTML5 Canvas and JavaScript demo by Kevin Roast - an example of what can be achieved without a Flash plugin using the canvas 2D APIs" />
   </head>
   
   <body style="background-color: #000000">
      <div class="button-overlay">
         <!-- AddThis Button BEGIN -->
         <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
         <a class="addthis_button_preferred_1"></a>
         <a class="addthis_button_preferred_2"></a>
         <a class="addthis_button_compact"></a>
         <a class="addthis_counter addthis_bubble_style"></a>
         </div>
         <!-- AddThis Button END -->
      </div>
      <div class="wrapper">
         <canvas class="box-shadow" id="canvas" width="640" height="640"></canvas>
         <div class="info">
            <div class="infopanel box-shadow">
               <div class="title">Asteroids [Reloaded]</div>
               <div class="settings">
                  <p class="left heading">Instructions:</p>
                  <p>Left and Right Arrows: Rotate ship</p>
                  <p>Up Arrow: Thrust</p>
                  <p>SPACE: Fire main weapon(s)</p>
                  <p>Z: Fire bomb weapon (area effect, uses energy)</p>
                  <p>Down Arrow or SHIFT: Shield (will recharge...)</p>
                  <p class="highlight section">S: Enable or disable sound effects</p>
                  <p class="highlight">R: Switch between Modern and Retro graphics</p>
                  <p class="highlight">Escape: Pause the game</p>
                  <p class="section"><a href="./index-debug.html">Asteroids DEBUG page</a></p>
               </div>
               <div>
                  <p class="left section"><a href="http://www.google.co.uk/chrome" target="new">Chrome</a> | <a href="http://www.apple.com/safari/download" target="new">Safari</a> | <a href="http://www.mozilla.com/firefox" target="new">FireFox</a> | <a href="http://www.opera.com/download" target="new">Opera</a> | <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="new">IE9</a></p>
               </div>
               <div>
                  <p class="left"><a href="asteroids-src.zip">Download JavaScript source code</a></p>
               </div>
               <div>
                  <p class="left"><a href="../index.html">HTML5 Canvas demos and experiments</a></p>
               </div>
            </div>
         </div>
      </div>
      <div class="credits-wrapper">
         <div class="credits box-shadow">
            Game by Kevin Roast - written to learn the <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element" target="new">HTML5 Canvas API</a> while reading about the concepts in <a href="http://www.amazon.co.uk/exec/obidos/ASIN/0123742978" target="new">this book on game maths</a>.<br>
            <a href="http://twitter.com/kevinroast" target="new">Follow me on Twitter</a> - Last updated: 9th December 2011
         </div>
      </div>
   </body>
</html>